<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SVG 实现拟物态圆环进度条</title>
  </head>
  <link rel="stylesheet" href="../common.css" />
  <style>
    :root {
      --bg: #edf1f5;
      /* 背景颜色 */
      --back-bg: #c5ccda;
      /* 定义宽度 */
      --w: 200px;
      --back-shadow: #fff;
      /* 父容器gap间距 */
      --gap: 30px;
      /* 第二层圆形宽度 */
      --inner: calc(var(--w) - var(--gap));
      /* svg圆环颜色 */
      --ring-color1: #c1dfc4;
      --ring-color2: #3cba92;
      /* 文本颜色 */
      --text-color: #497241;
      /* 定义stroke的宽度 */
      --stroke: 20px;
      /* svg环形宽度 更正内容*/
      --circle: calc(var(--inner) - var(--stroke));
      /* 第三层圆形宽度 */
      --center: calc(var(--circle) - var(--stroke));
    }
    body {
      background: var(--back-bg);
    }
    .container {
      padding: 30px;
      border-radius: 20px;
      background: var(--bg);
      box-shadow: 0 20px 30px rgba(100, 131, 177, 0.2);
      border: 1px solid #fff;
    }
    .container-box {
      width: var(--w);
      height: var(--w);
      position: relative;
    }
    /* 添加百分比显示文字 */
    .container-box::after {
      content: attr(data-num);
      position: absolute;
      font-size: 30px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: var(--text-color);
    }
    .circle-outer {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      box-shadow: 6px 6px 8px var(--back-bg), -6px -6px 8px var(--back-shadow);
      background: var(--bg);
    }
    .circle-outer::before {
      width: var(--inner);
      height: var(--inner);
      box-shadow: inset 8px 8px 10px var(--back-bg),
        inset -4px -4px 8px var(--back-shadow);
    }
    .circle-outer::after {
      width: var(--center);
      height: var(--center);
      box-shadow: 6px 6px 8px var(--back-bg), -2px -2px 8px var(--back-shadow);
    }
    /* 合并代码 */
    .circle-outer::before,
    .circle-outer::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: var(--bg);
    }
    svg {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      transform: rotate(-90deg);
    }
    svg circle {
      cy: calc(var(--circle) / 2);
      cx: calc(var(--circle) / 2);
      r: calc(var(--circle) / 2);
      fill: none;
      /* 圆角 */
      stroke-linecap: round;
      position: absolute;
      --z: calc(var(--w) / 2);
      --c: calc(var(--circle) / 2);
      transform: translate(
        calc(var(--z) - var(--c)),
        calc(var(--z) - var(--c))
      );
      /* 圆的周长 */
      stroke-dasharray: calc(3.14 * var(--circle));
      stroke-dashoffset: calc(3.14 * var(--circle));
      stroke-width: var(--stroke);
    }
  </style>
  <body>
    <div class="container">
      <div class="container-box" data-num="--" id="box">
        <div class="circle-outer"></div>
        <!-- 添加svg -->
        <svg>
          <defs>
            <radialGradient
              id="gradient"
              cx="50%"
              cy="50%"
              r="60%"
              fx="50%"
              fy="50%"
            >
              <stop offset="30%" stop-color="var(--ring-color2)" />
              <stop offset="100%" stop-color="var(--ring-color1)" />
            </radialGradient>
          </defs>
          <circle id="circle" stroke="url(#gradient)"></circle>
        </svg>
      </div>
    </div>
  </body>
  <script>
    // 添加定时器
    const getData = () => {
      const circle = document.getElementById("circle");
      const box = document.getElementById("box");
      let perimeter = 3.14 * 150; //150是stroke-dasharray的值
      let i = 0;
      let timer = null;
      const loading = () => {
        if (i < 100) {
          i++;
          box.dataset.num = i + "%";
          let per = perimeter - (perimeter * i) / 100;
          circle.style.strokeDashoffset = per;
        } else {
          timer && clearInterval(timer);
        }
      };
      loading();
      timer = setInterval(loading, 100);
    };
    // 执行
    getData();
  </script>
</html>
